<template>
	<view class="">
		<view class="background ">
			<image src="/static/image/login02.png" class="iejdv"></image>
			<view class="eijdb">

			</view>
			<!-- 验证码登录 -->
			<view class="Simple" v-show="!showed">
				<view class="prompted">
					<view style="color: #fff;margin-left: 30rpx;">密码登录</view>
					<view style="font-weight: bold; font-size: 40rpx;">验证码登录</view>
					<view style="margin-right: 30rpx;">密码登录</view>
				</view>
				<view class="verify">
					<view class="propped">
						<input style="width: 402rpx;" class="uni-input" focus placeholder="请输入手机号" />
					</view>
					<view class="below">
						<input style="width: 402rpx;" class="uni-input" focus placeholder="请输入验证码" />
						<view style="color: #1070bc;">获取验证码</view>
					</view>
				</view>
			</view>
			<!-- 密码登录 -->
			<view class="Simple" v-show='showed'>
				<view class="prompted">
					<view style="color: #fff;margin-left: 30rpx;">验证码登录</view>
					<view>密码登录</view>
					<view style="margin-right: 30rpx;">验证码登录</view>
				</view>
				<view class="verify">
					<view class="propped">
						<input style="width: 402rpx;" class="uni-input" focus placeholder="请输入手机号" />
					</view>
					<view class="below">
						<input style="width: 402rpx;" class="uni-input" focus placeholder="请输入密码" />
					</view>
				</view>
			</view>
		</view>
		<view class="operate">
			<view class="">
				<button>登录</button>
			</view>
			<view class="reminder" @click="enroll">
				没有账号,立即注册
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				showed: false
			}
		},

		methods: {
			enroll() {
				uni.navigateTo({
					url: '/pages/enroll/enroll'
				})
			}
		}
		}
</script>
<style lang="less">
	page {
		background-color: #f9f9f9;
		height: 100vh;
	}

	.eijdb {
		width: 100%;
		height: 110rpx;
		display: flex;
		justify-content: space-between;
	}

	.iejdv {
		width: 100%;
		height: 335rpx;
	}

	.prompted {
		display: flex;
		justify-content: space-between;
	}

	.Simple {
		background-color: #fff;
		margin: 0 24rpx 0 24rpx;
		padding: 84rpx 0 42rpx 0;
		position: absolute;
		top: 200rpx;
		left: 0;
		right: 0;
		border-radius: 20rpx;

		.verify {
			display: flex;
			flex-direction: column;
			padding: 0 35rpx 0 35rpx;
		}

		input {
			padding: 35rpx 0 35rpx 0;
		}

		.propped {
			border-bottom: 1rpx solid #e5e5e5;
		}

		.below {
			display: flex;
			align-items: center;
			justify-content: space-between;
		}
	}

	.operate {
		margin-top: 332rpx;

		button {
			margin: 113rpx;
			border-radius: 50rpx;
			font-size: 32rpx;
			color: #fff;
			background-color: #1b79cad1;
		}

		.reminder {
			width: 50%;
			height: 30rpx;
			margin-left: auto;
			margin-right: auto;
			text-align: center;
			font-size: 29rpx;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}
</style>